<template>
  <div style="background: #202B61;width: 100%;height: 100%;">
    <!-- 电锅炉资源维护 -->
    <div style="top: 1%; width: 100%;height: 80vh;float: left;position: absolute;">

      <div class="box1">

        <el-form ref="queryParamForm" label-width="110px" label-suffix	=":" align="left"  style="padding-top: 1vh;color: #FFFFFF;"  :inline="true" :model="queryParamForm" >

          <el-form-item  label-width="100px"  label="投资成本">
            <el-input  style="width: 120px;" v-model="queryParamForm.tz_costStart">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">元</i>
            </el-input>
          </el-form-item>

          <el-form-item  label-width="50px"  label="至">
            <el-input  style="width: 120px;"  v-model="queryParamForm.tz_costEnd">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">元</i>
            </el-input>
          </el-form-item>

          <el-form-item  label="电功率">
            <el-input  style="width: 120px;"  v-model="queryParamForm.rated_ele_powerStart">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">kW</i>
            </el-input>
          </el-form-item>
          <el-form-item label-width="50px"  label="至">
            <el-input  style="width: 120px;"  v-model="queryParamForm.rated_ele_powerEnd">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">kW</i>
            </el-input>
          </el-form-item>

          <el-form-item style="float: right;right: 20px;" >
            <el-button type="primary" size="small" icon="el-icon-search"  @click="retrieveElectricBoilerResource">查询</el-button>
            <el-button type="primary" size="small" icon="el-icon-refresh-right"  @click="clearQueryParam">清空</el-button>
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline"  @click="addElectricBoilerResource">新建</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="box2">
        <!--  -->
        <el-dialog title="电锅炉信息" width="120vh"  :visible.sync="dialogFormVisible" align="left">
          <el-form ref="electricBoilerResourceData"  :rules="electricBoilerResourceRules"  label-width="100px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="electricBoilerResourceData" >
            <el-form-item  label="品牌" prop="brand">
              <el-input v-model="electricBoilerResourceData.brand"></el-input>
            </el-form-item>
            <el-form-item  label="型号" prop="model">
              <el-input v-model="electricBoilerResourceData.model">
              </el-input>
            </el-form-item>
            <el-form-item  label="投资成本" prop="tz_cost">
              <el-input v-model="electricBoilerResourceData.tz_cost">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">元</i>
              </el-input>
            </el-form-item>
            <el-form-item  label="运维成本" prop="yw_cost">
              <el-input v-model="electricBoilerResourceData.yw_cost">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">元</i>
              </el-input>
            </el-form-item>
            <el-form-item  label="寿命" prop="life">
              <el-input v-model="electricBoilerResourceData.life">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">h</i>
              </el-input>
            </el-form-item>
            <el-form-item  label="铭牌" prop="nameplate">
              <el-input v-model="electricBoilerResourceData.nameplate">
              </el-input>
            </el-form-item>
            <el-form-item  label="额定热功率" prop="temper">
              <el-input v-model="electricBoilerResourceData.rated_hot_power">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">kW</i>
              </el-input>
            </el-form-item>
            <el-form-item  label="额定电功率" prop="temper">
              <el-input v-model="electricBoilerResourceData.rated_ele_power">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">kW</i>
              </el-input>
            </el-form-item>
            <el-form-item  label="供热量" prop="temper">
              <el-input v-model="electricBoilerResourceData.heat_load">
              </el-input>
            </el-form-item>
            <el-form-item  label="额定电压" prop="temper">
              <el-input v-model="electricBoilerResourceData.rated_voltage">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">kW</i>
              </el-input>
            </el-form-item>
            <el-form-item  label="额定电流" prop="temper">
              <el-input v-model="electricBoilerResourceData.rated_current">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">kW</i>
              </el-input>
            </el-form-item>
            <el-form-item  label="额定出水温度" prop="temper">
              <el-input v-model="electricBoilerResourceData.rated_cswd">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">℃</i>
              </el-input>
            </el-form-item>
            <el-form-item  label="额定回水温度" prop="temper">
              <el-input v-model="electricBoilerResourceData.rated_hswd">
                <i slot="suffix" style="font-style:normal;margin-right: 10px;">℃</i>
              </el-input>
            </el-form-item>
            <el-form-item  label="运行总重量" prop="temper">
              <el-input v-model="electricBoilerResourceData.weight">
              </el-input>
            </el-form-item>
            <el-form-item  label="修改时间"  prop="modify_time">
              <el-input v-model="electricBoilerResourceData.modify_time" style="text-align: left" disabled="true"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" icon="el-icon-circle-check" @click="saveElectricBoilerResource" >保存</el-button>
            <el-button type="primary" icon="el-icon-circle-close" size="small" @click="dialogFormVisible = false;">取 消</el-button>
          </div>
        </el-dialog>
        <!--  -->
        <el-table  :data="electricBoilerResourceArray.slice((currpage - 1) * pagesize, currpage * pagesize)" :row-class-name="tableRowClassName" height="650"  :header-cell-style="headerStyle"   :header-row-style="cellStyle" element-loading-text="正在加载中..." element-loading-background="rgba(0, 0, 0, .3)" >
          <el-table-column prop="Id" type="index" label="序号" align="center" >
          </el-table-column>
          <el-table-column prop="Id" label="品牌" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.brand}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="Id" label="型号" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.model}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="Id" label="投资成本（元）" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.tz_cost}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="Id" label="运维成本（元）" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.yw_cost}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="Id" label="寿命（h）" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.life}}</span>
            </template>
          </el-table-column>

          <el-table-column prop="Id" label="铭牌" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.nameplate}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Id" label="额定热功率" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.rated_hot_power}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Id" label="额定电功率" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.rated_ele_power}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Id" label="供热量" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.heat_load}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Id" label="额定电压" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.rated_voltage}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Id" label="额定电流" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.rated_current}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Id" label="额定出水温度" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.rated_cswd}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Id" label="额定回水温度" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.rated_hswd}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Id" label="运行总重量" align="center" >
            <template slot-scope="scope">
              <span>{{scope.row.weight}}</span>
            </template>
          </el-table-column>

          <el-table-column fixed="right" align="center" width="200" label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="primary" icon="el-icon-edit" @click="updateElectricBoilerResource(scope.row,scope.$index)" >编辑</el-button>
              <el-button size="small" type="danger" icon="el-icon-delete" @click="removeElectricBoilerResource(scope.row,scope.$index)"  >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background
                       layout="prev, pager, next, total, jumper"

                       :page-size="pagesize"
                       :total="electricBoilerResourceArray.length"
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    name: 'dglResource',
    components: {
    },
    data () {
      return {
        dialogFormVisible : false,
        pagesize: 10,
        currpage: 1,
        queryParamForm:{
          tz_costStart : '',
          tz_costEnd : '',
          rated_ele_powerStart : '',
          rated_ele_powerEnd : '',
        },
        electricBoilerResourceArray:[],
        electricBoilerResourceData:{
          id:"",
          brand:"",
          model:"",
          tz_cost:"",
          yw_cost:"",
          life:"",
          nameplate:"",
          modify_time:"",
          rated_hot_power:"",
          rated_ele_power:"",
          heat_load:"",
          rated_voltage:"",
          rated_current:"",
          rated_cswd:"",
          rated_hswd:"",
          weight:"",
        },
        electricBoilerResourceRules: {
          brand: [
            { required: true, message: '请输入品牌名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          model: [
            { required: true, message: '请输入型号', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
        },
      }
    },
    mounted(){
      var queryParamForm = this.queryParamForm;
      //初始化页面参数
      this.$http.post("/iepsapi/resource/dglResource/retrieveElectricBoilerResource", {queryParamForm}).then((res) => {
        var pageParam = res.data;
        if(pageParam!=null&&pageParam!=""){
          this.electricBoilerResourceArray = pageParam;
        }else{
          this.electricBoilerResourceArray = [];
        }
      })
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex %2 == 0)  //=>这里可以改成 rowIndex%2=== 1，后面直接else即可达到隔行变色效果。
        {
          return 'warning-row';
        } else {
          return 'success-row';
        }
        return '';
      },
      cellStyle ({ row, column, rowIndex, columnIndex }) {
        return 'background:rgba(40,54,121, 1);border:none;'
      },
      headerStyle ({ row, column, rowIndex, columnIndex }) {
        return 'background:rgba(52,52,147, 0.6);border:none;'
      },
      clearQueryParam: function() {
        this.queryParamForm = {
          tz_costStart: '',
          tz_costEnd: '',
          rated_ele_powerStart: '',
          rated_ele_powerEnd: '',
        }
      },
      retrieveElectricBoilerResource : function(){
        var queryParamForm = this.queryParamForm;
        //初始化页面参数
        this.$http.post("/iepsapi/resource/dglResource/retrieveElectricBoilerResource", {queryParamForm}).then((res) => {
          var pageParam = res.data;
          if(pageParam!=null&&pageParam!=""){
            this.electricBoilerResourceArray = pageParam;
          }else{
            this.electricBoilerResourceArray = [];
          }
        })
      },
      handleCurrentChange(cpage) {
        this.currpage = cpage;
      },
      handleSizeChange(psize) {
        this.pagesize = psize;
      },
      addElectricBoilerResource:function(){
        this.electricBoilerResourceData={
          id:"",
          brand:"",
          model:"",
          tz_cost:"",
          yw_cost:"",
          life:"",
          single_cap:"",
          cold_cop:"",
          nameplate:"",
          modify_time:"",
        };
        this.dialogFormVisible = true;
      },
      /* 保存 */
      saveElectricBoilerResource : function(){
        this.$refs['electricBoilerResourceData'].validate((valid) => {
          if (valid) {
            var id = this.electricBoilerResourceData.id;
            var electricBoilerResourceData = this.electricBoilerResourceData
            //update
            if(id!=null&&id!=""){
              this.$http.post("/iepsapi/resource/dglResource/updateElectricBoilerResource", {electricBoilerResourceData}).then((res) => {
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                this.retrieveElectricBoilerResource();
              })
            }else{
              //insert
              this.$http.post("/iepsapi/resource/dglResource/saveElectricBoilerResource", {electricBoilerResourceData}).then((res) => {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                });
                this.retrieveElectricBoilerResource();
              })
            }
            this.dialogFormVisible = false;
          }
        });
      },
      /* 修改表格内的信息 */
      updateElectricBoilerResource : function (row,index) {
        this.electricBoilerResourceData = row;
        this.dialogFormVisible = true;
      },

      /* 删除表格内的信息 */
      removeElectricBoilerResource : function (row,index) {

        this.$confirm('是否确认删除该电锅炉信息！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

          type: 'warning'
        }).then(() => {

          //根据子组件传递的index删除父组件当中的窗户数组当中的窗户数据
          var removeObj = this.electricBoilerResourceArray.splice(index,1);

          var id = removeObj[0].id;

          if(id!=null&&id!=""){

            this.$http.post("/iepsapi/resource/dglResource/deleteElectricBoilerResource?id="+id, {}).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })

          }else{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>
<style scoped >
  .floorBox{
    width: 100%;
    background: inherit;
    color: white;
    min-height: 20vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(81,101,205, 1);
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }
  .floorInfo{
    padding-top: 0.5vh;
    width: 99%;
    margin: 0 auto;
    height: 6vh;
    color: white;
    font-size: 1.8vh;
    text-align: left;
  }
  /* 分页样式 */
  /deep/ .el-pagination__jump {
    margin-left: 24px;
    font-weight: 400;
    color: #FFF;
  }
  /deep/ .el-pagination__total {
    margin-right: 10px;
    font-weight: 400;
    color: #FFF;
  }
  /deep/ .el-table .warning-row {
    background: rgba(95,168,240, 0.6);
  }
  /deep/ .el-table .success-row {
    background:#1A8AFA;
  }
  /* 去除表格线 */
  .my_table >>> .el-table__row>td{
    /* 去除表格线 */
    border: none;
  }
  /deep/ .el-table__empty-text {
    line-height: 60px;
    width: 50%;
    color: #FFF;
  }
  /deep/ .el-input.is-disabled .el-input__inner{
    background-color: #161E43;
    border-color: #161E43;
    color: #FFFFFF;
    text-align: left;
    cursor: not-allowed;
  }
  .my_table >>> .el-table th.is-leaf {
    /* 去除上边框 */
    border: none;
  }
  .my_table >>> .el-table::before{
    /* 去除下边框 */
    height: 0;
  }
  /deep/ .el-table--enable-row-transition .el-table__body td {
    -webkit-transition: background-color .25s ease;
    transition: background-color .25s ease;
    background:rgba(40,54,121, 0.9);
    border: none;
  }
  /deep/ .el-table th, .el-table tr {
    background:rgba(40,54,121, 0.9);
    border: none;
  }
  /deep/ .el-table tr {
    background:rgba(40,54,121, 0.9);
    border: none;
  }
  /deep/ .el-table__body-wrapper {
    overflow: hidden;
    position: relative;
    background:rgba(40,54,121, 1);
    border: none;
  }
  /deep/ .el-dialog, .el-pager li {
    background:rgba(40,54,121, 0.9);
    -webkit-box-sizing: border-box;
    border: none;
  }
  /deep/ .el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    color: #FFF;
    padding-right: 10px;
    border: none;
  }
  /deep/ .el-table th>.cell {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    color: #FFF;
    border: none;
  }
  /deep/ .el-table__expand-icon>.el-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -5px;
    margin-top: -5px;
    color: #FFF;
    border: none;
  }
  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background:rgba(40,54,121, 0.9);
  }
  /deep/   .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    background:rgba(41,141,247, 1);
    height: 0px;
  }
  /deep/  .el-table__fixed-right::before, .el-table__fixed::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
    background:rgba(41,141,247, 1);
    z-index: 4;
  }
  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }
  /deep/ .el-dialog, .el-pager li {
    background: #202B61;
    -webkit-box-sizing: border-box;
  }

  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background: #374590;
  }
  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }
  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }
  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .box1{
    position: relative;
    width: 100%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    height: 7vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }
  .box2{
    position: relative;
    width: 100%;
    min-height: 74vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }
  .title{
    width:100%;
    height:5vh;
    line-height: 5vh;
    background:rgba(55, 69, 144, 1);
    font-weight:bold;
    background: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vh;
    color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(55, 69, 144, 1);
    border-radius: 1px;
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.345098039215686);
  }
</style>
